import { Icon, LegacyCard, Listbox, Combobox, Button } from "@shopify/polaris";
import { MobileBackArrowMajor, SearchMinor } from "@shopify/polaris-icons";
import styled from "./index.module.less";
import { useState, useCallback, useMemo } from "react";

import GgModal from "./Genggailianxiren";
import HbxqModal from "./Hebingxiangqin";

import { useNavigate } from "react-router-dom";

const App = () => {

  const navigate = useNavigate()
  const [AFCJK, setAFCJK] = useState(false);
  const [AFCJKs, setAFCJKs] = useState(false);
  const deselectedOptions = useMemo(
    () => [
      { value: "rustic", label: "Rustic" },
      { value: "antique", label: "Antique" },
    ],
    []
  );

  const [selectedOption, setSelectedOption] = useState<string | undefined>();
  const [inputValue, setInputValue] = useState("");
  const [options, setOptions] = useState(deselectedOptions);

  const updateText = useCallback(
    (value: string) => {
      setInputValue(value);

      if (value === "") {
        setOptions(deselectedOptions);
        return;
      }

      const filterRegex = new RegExp(value, "i");
      const resultOptions = deselectedOptions.filter((option) =>
        option.label.match(filterRegex)
      );
      setOptions(resultOptions);
    },
    [deselectedOptions]
  );

  const updateSelection = useCallback(
    (selected: string) => {
      const matchedOption = options.find((option) => {
        return option.value.match(selected);
      });

      setSelectedOption(selected);
      setInputValue((matchedOption && matchedOption.label) || "");
    },
    [options]
  );

  const optionsMarkup =
    options.length > 0
      ? options.map((option) => {
          const { label, value } = option;

          return (
            <Listbox.Option
              key={`${value}`}
              value={value}
              selected={selectedOption === value}
              accessibilityLabel={label}
            >
              {/* <div>
                <div>{label}</div>
                <div>Rustic.saefg@163.com</div>
                <div>0订单</div>
              </div> */}
              {label}
            </Listbox.Option>
          );
        })
      : null;

  return (
    <div className={styled.Box}>
      <div className={styled.box}>
        <div className={styled.HPKHE}>
          <div className={styled.HGUIASD} onClick={()=>{window.history.back()}}>
            <Icon source={MobileBackArrowMajor}></Icon>
          </div>
          <div className={styled.EWFVS}>合并客户</div>
        </div>
        <div>
          <LegacyCard sectioned>
            <div className={styled.BHUASD}>JessicaMalambri</div>
            <div className={styled.SAIHOD}>客户 ID：5595335524415</div>
            <div className={styled.SAIHOD}>lendaver@vip.qq.com</div>
            <div className={styled.SAIHOD}>没有电话号码</div>
            <div className={styled.SWEQASC}>
              <div className={styled.AIFBJWD}>
                <div className={styled.VUGSJA}></div>
                <div>没有经典账户</div>
              </div>
              <div className={styled.AIFBJWD}>
                <div className={styled.SADBVGIH}></div>
                <div>已订阅电子邮件</div>
              </div>
              <div className={styled.AIFBJWD}>
                <div className={styled.VUGSJA}></div>
                <div>未订阅短信</div>
              </div>
            </div>
            {!inputValue && (
              <div>
                <div className={styled.SRGEDF}>查找要合并的客户</div>
                <div>
                  <Combobox
                    activator={
                      <Combobox.TextField
                        prefix={<Icon source={SearchMinor} />}
                        onChange={updateText}
                        label=""
                        labelHidden
                        value={inputValue}
                        placeholder="搜索客户"
                        autoComplete="off"
                      />
                    }
                  >
                    {options.length > 0 ? (
                      <Listbox onSelect={updateSelection}>
                        {optionsMarkup}
                      </Listbox>
                    ) : null}
                  </Combobox>
                </div>
              </div>
            )}
            {inputValue && (
              <div>
                <div style={{ height: "20px" }}></div>
                <div className={styled.BHUASD}>{inputValue}</div>
                <div className={styled.SAIHOD}>客户 ID：5595335524415</div>
                <div className={styled.SAIHOD}>lendaver@vip.qq.com</div>
                <div className={styled.SAIHOD}>没有电话号码</div>
                <div className={styled.SWEQASC}>
                  <div className={styled.AIFBJWD}>
                    <div className={styled.VUGSJA}></div>
                    <div>没有经典账户</div>
                  </div>
                  <div className={styled.AIFBJWD}>
                    <div className={styled.SADBVGIH}></div>
                    <div>已订阅电子邮件</div>
                  </div>
                  <div className={styled.AIFBJWD}>
                    <div className={styled.VUGSJA}></div>
                    <div>未订阅短信</div>
                  </div>
                </div>
                <div className={styled.IYHGFC}>
                  <Button
                    size="slim"
                    onClick={() => {
                      setInputValue("");
                    }}
                  >
                    更改客户
                  </Button>
                </div>
              </div>
            )}
          </LegacyCard>
          {inputValue && (
            <LegacyCard sectioned>
              <div className={styled.AXXVDW}>
                <div className={styled.FJMSCX}>已合并的客户</div>
                <div>
                  <Button
                    plain
                    onClick={() => {
                      setAFCJKs(true);
                    }}
                  >
                    查看合并详情
                  </Button>
                </div>
              </div>
              <div className={styled.AFBWCAV}>
                <div className={styled.BHUASD}>{inputValue}</div>
                <div className={styled.SAIHOD}>客户 ID：5595335524415</div>
                <div className={styled.SAIHOD}>lendaver@vip.qq.com</div>
                <div className={styled.SAIHOD}>没有电话号码</div>
                <div className={styled.SWEQASC}>
                  <div className={styled.AIFBJWD}>
                    <div className={styled.VUGSJA}></div>
                    <div>没有经典账户</div>
                  </div>
                  <div className={styled.AIFBJWD}>
                    <div className={styled.SADBVGIH}></div>
                    <div>已订阅电子邮件</div>
                  </div>
                  <div className={styled.AIFBJWD}>
                    <div className={styled.VUGSJA}></div>
                    <div>未订阅短信</div>
                  </div>
                </div>
                <div className={styled.IYHGFC}>
                  <Button
                    size="slim"
                    onClick={() => {
                      setAFCJK(true);
                    }}
                  >
                    编辑联系信息
                  </Button>
                </div>
              </div>
              <div>
                <div className={styled.WDFTHYU}>
                  还将合并订单、地址、备注、标签、元字段、礼品卡、折扣和税费设置等客户数据。
                </div>
              </div>
            </LegacyCard>
          )}
          <div className={styled.QWSGASD}>
            <div>
              <Button size="slim">取消</Button>
            </div>
            <div className={styled.QDSGBN}>
              {inputValue ? (
                <Button size="slim" primary>
                  合并
                </Button>
              ) : (
                <Button size="slim" primary disabled>
                  合并
                </Button>
              )}
            </div>
          </div>
          <div className={styled.PPJKNWE}>
            详细了解<Button plain>合并客户</Button>
          </div>
        </div>
        {/* 组件 */}
        {AFCJK && <GgModal active={AFCJK} setActive={setAFCJK} />}
        {AFCJKs && <HbxqModal active={AFCJKs} setActive={setAFCJKs} />}
        {/* 组件 */}
      </div>
    </div>
  );
};

export default App;
